<template>
  <div id="container">
    <div class="banner">
    	<img src="http://www.dilidili.wang/uploads/allimg/180806/290_0139135761.jpg" alt="进击的巨人 第三季">
    </div>
    <div class="list">
    	<ul>
    		<!--<router-link v-for="(v,i) in list" :key="i" tag="li" :to="{path:'/index',query:{id:v.id}}">{{v.cont}}</router-link>-->
    		<li v-for="(v,i) in list" @click="show=i">{{v.cont}}</li>
    	</ul>
    	<div class="sho" v-show="show==0">
    		<ul v-for="(v,i) in list[0].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==1">
    		<ul v-for="(v,i) in list[1].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==2">
    		<ul v-for="(v,i) in list[2].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==3">
    		<ul v-for="(v,i) in list[3].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	
    	</div>
    	<div class="sho" v-show="show==4">1
    		<ul v-for="(v,i) in list[4].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>	
    	</div>
    	<div class="sho" v-show="show==5">
    		<ul v-for="(v,i) in list[5].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==6">
    		<ul v-for="(v,i) in list[6].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    </div>
    <div class="line"></div>
    <div class="main">
    	<ul>
    		<li><img src="../../img/评价.png"/></li>
    		<li>最近更新</li>
    		<li>补番刷一下</li>
    	</ul>
    	<div class="bottom">
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0159521171.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0124279921.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    	</div>
    </div>
    <div class="line"></div>
   <div class="main">
    	<ul>
    		<li><img src="../../img/评价.png"/></li>
    		<li>最近更新</li>
    		<li>补番刷一下</li>
    	</ul>
    	<div class="bottom">
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0159521171.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0124279921.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    	</div>
    </div>
    
    
    
    
   </div>
   
</template>

<script>
export default {
	 name: 'App',
	 data(){
	 	return{
	 		show:0, 
	 		list:[
	 		{id:0,cont:"周一",main:[{name:"11111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:1,cont:"周二",main:[{name:"11111111111",right:"11"},{name:"22222222222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:2,cont:"周三",main:[{name:"111111111111111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:3,cont:"周四",main:[{name:"1111666661",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:4,cont:"周五",main:[{name:"1111111111111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:5,cont:"周六",main:[{name:"111115555",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:6,cont:"周日",main:[{name:"1111177777",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]}
	 		]
	 	}
	 },
	 	mounted(){
	 		  var qs = this.$route.query.id ;
	 		  this.qs =  qs
	 	}
}
</script>

<style scoped>
.banner{
	margin-top: 40px;
}
.banner img{
	width: 100%;
}
.list ul{
	display: flex;
}
.list ul li{
	flex: 1;
	text-align: center;
	line-height:40px ;
}
.sho ul li{
	height: 50px;
	border-top: 1px dashed #ccc;
}
.line{
	height: 15px;
	background: #F1F1F1;
}
.main ul{
	display: flex;
	height: 50px;
	align-items: center;
	font-family: "微软雅黑";
}
.main ul li:first-child{
	width: 10%;
	text-align: center;
}
.main ul li:first-child img{
	height: 20px;
}
.main ul li:nth-child(2){
	flex: 1;
	font-size: 20px;
}
.main ul li:last-child{
	width: 30%;
	text-align: center;
}
.bottom {
	display: flex;
	flex-wrap:wrap ;
	padding: 5px;
}
.bottom dl{
	width: 50%;
}
.bottom dl dt{
	padding: 8px;
}
.bottom dl img{
	width: 100%;
}
</style>